@extends('layouts.header')
@section('content')
    <article class="page-container">
        <form class="form form-horizontal" id="form" autocomplete="off" >
            <div class="row cl">
                <label class="form-label col-sm-3">样品类型：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->toolname }}</label>
                {{-- <input type="hidden" name="tool_id" value="{{ $data_rel->tool_id }}"> --}}
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">检验标准：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->num }}</label>
                {{-- <input type="hidden" name="std_id" value="{{ $data_rel->std_id }}"> --}}
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">检验项目：</label>
                <label class="form-label col-sm-9" style="text-align: left;"> {{ $data_rel->itemname }}</label>
                {{-- <input type="hidden" name="item_id" value="{{ $data_rel->testitem_id }}"> --}}
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">额定电压/分类：</label>
                <div class="formControls col-sm-9">
                    <select class="select2" name="vol_class_id" style="width: 200px">
                        <option value="0">无关</option>
                        @foreach($data_vol_class as $val)
                        <option value="{{$val -> id}}">{{$val -> val}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3">{{ $data_rel->key }}：</label>
                <div class="formControls col-sm-9">
                    <select class="input-text" id="symbol" style="width:60px;">
                        <option>=</option>
                        <option><</option>
                        <option>≤</option>
                        <option>></option>
                        <option>≥</option>
                    </select>
                    <input type="text" class="input-text required notSpace isNumber" value="" placeholder="必填项" id="val1" style="width:100px;">
                    ～
                    <input type="text" class="input-text isNumber" value="" placeholder="非必填项" id="val2" style="width:100px;">
                    {{ $data_rel->unit }}
                    <input type="hidden" value="" name="val" style="width:100px;">
                </div>
            </div>

            @csrf

            <div class="row cl">
                <div class="col-sm-9 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;添加&nbsp;&nbsp;">
                </div>
            </div>
        </form>

        <div class="mt-15">
            <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed">
                <thead>
                    <tr class="text-c">
                        <th>ID</th>
                        <th>额定电压/分类</th>
                        <th>{{ $data_rel->key }}（{{ $data_rel->unit }}）</th>
                        {{-- <th width="100px">排序</th> --}}
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $val)
                        <tr class="text-c">
                            <td>{{ $val->id }}</td>
                            <td>
                                <select class="select2 input-text" onchange="changeVolClass({{ $val->id }},this)" style="width: 200px">
                                    <option value="0">/</option>
                                    @foreach($data_vol_class as $val1)
                                    <option value="{{$val1 -> id}}" @if($val1->id == $val->vol_class_id) selected @endif>{{$val1 -> val}}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>{{ $val->condition_val }}</td>
                            <td>
                                <a href="javascript:;" onclick="del(this,{{ $val->id }})" class="ml-5 btn btn-danger-outline radius size-MINI" >删除</a>
                            </td>
                        </tr>
                    @endforeach
                    
                </tbody>
                @csrf
            </table>
        </div>
    </article>
    <script type="text/javascript">
        $(function(){
            var index2;
            $('.select2').select2();

            $("#form").validate({
                // onkeyup:false,
                // focusCleanup:false,
                beforeSend:function(form) {
                },
                success:"valid",
                submitHandler:function(form){
                   $(form).ajaxSubmit({ 
                        type: 'post', 
                        url: "",//自己提交给自己可以不写url   
                        //beforeSend  beforeSubmit
                        beforeSend : function (form) { 
                            //0.4透明度 白色遮罩
                            index2 = layer.load(2,{ shade: [0.3,'#fff'] }); 
                        },
                        complete : function () { 
                            layer.close(index2); 
                        },
                        success: function(data) {
                            //判断添加结果 
                            if(data === '1'){ 
                                window.location.reload();//刷新
                                parent.layer.msg('添加成功!',{ icon: 1, time:2000 });
                            }else if(data === '2'){ 
                                layer.msg('已存在相同的记录!',{ icon: 2, time:5000 });
                            }
                            else{
                                layer.msg('操作失败!', { icon: 2, time: 2000 }); 
                            } 
                        }, 
                        error: function(data) {
                            console.log(data);
                            ajax_error(data);
                        }///error---end
                    }); 
                }
            });


        });

        /*删除*/
        function del(obj,id){
            var index2;

            layer.confirm('确认要删除吗？',function(index){
                $.ajax({
                    type: 'GET',
                    url: '/{{config('constant.name_admin')}}/condition/del' + '?id=' + id,
                    // dataType: 'json',
                    success: function(data){
                        // console.log(data);
                        if(data === '1'){
                            $(obj).parents("tr").remove();
                            layer.msg('删除成功!',{icon:1,time:2000});
                        }else{
                            layer.msg('删除失败!',{icon:2,time:2000});
                        }
                    },
                    error:function(data) {
                        ajax_error(data);
                    },
                    beforeSend : function () { 
                        //0.4透明度 白色遮罩
                        index2 = layer.load(2,{ shade: [0.05,'#000'] }); 
                    },
                    complete : function () { 
                        layer.close(index2); 
                    },
                });		
            });
        }

        /*关联xxx*/
        function rel_xxx(title,url,id,w,h){
            layer_show(title,url + '?id=' + id,w,h);
        }

        $('#val1,#val2').on('change',function () {
            let val1 = $('#val1').val(),
                val2 = $('#val2').val(),
                symbol = $('#symbol').val(),
                val = '';
            val = val2 !== '' ? val1+'～'+val2 : (symbol === '=' ? val1 : (symbol+val1.toString()));
            // console.log(val);
            $('input[name=val]').val(val);
        });


        function changeVolClass(id,obj){
            let vol_class_id = $(obj).val();
            ajax('post','',{condition_id:id,vol_class_id:vol_class_id},function(res){
                layer.msg(res == 1 ? '修改成功！' : '修改失败！');
            });
        }
        
    </script>
@endsection